<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="jquery-1.11.3.min.js"></script>
  <style>
     #div_main{
	    width:500px;
		margin-left:200px;
	 }
	 span{
	   color:red;
	   display:none;
	 }
  </style>
 </head>
 <body>
    <div id="div_main">
	    <form>
		   <h2>表单</h2>
		   <p>用户名：</p>
		   <p><input type="text" name="username" class="index"></input> <span class="">用户名至少位8位<span> </p>
		   <p>密码：</p>
		   <p><input type="password" name="password" class="index"></input> <span>密码至少位8位</span></p>
		   <p>再次输入密码：</p>
		   <p><input type="password" name="rePassword" class="index"></input> <span>两次输入的密码不一致</span></p>
		   <input type="submit" name="submit" value="确定"></input>
		</form>
	</div>
 </body>
 <script>
    $('.index').data({'num':0});
    $('input[name = username]').blur(function(){
	    var name = this.value;
		if(name.length < 8){
		   $(this).data({'num':0});
		   $(this).next().show();
		}else{
		   $(this).data({'num':1});
		   $(this).next().hide();
		}
	});
	$('input[name = password]').blur(function(){
	   var password = this.value;
	   if(password.length < 8){
		  $(this).data({'num':0});
	      $(this).next().show();
	   }else{
		  $(this).data({'num':1});
	      $(this).next().hide();
	   }
	 
	});
	$('input[name = rePassword]').blur(function(){
	   var rePassword = this.value;
	   var password = $('input[name = password]')[0].value;
	   if(rePassword != password){
		  $(this).data({'num':0});
	      $(this).next().show();
	   }else{
		  $(this).data({'num':1});
	      $(this).next().hide();
	   }
	});
	$('input[name = submit]').click(function(){
		 var n = 0;
		  
	     $('input[name = username]').blur();
		 $('input[name = password]').blur();
		 $('input[name = rePassword]').blur();
		 $('.index').each(function(i){
		      n = n + $(this).data('num');
		 });
		   
		 if(n != 3){
		     return false;
		 }
		 
	});
 </script>
</html>
